<template>
  <div class="page">
    <img class="left-bg" src="@/assets/images/loginLeftBg.png" alt="">
    <div class="login-box">
      <div class="title">欢迎注册AI智慧教育系统</div>
      <div class="type-list">
        <!-- <a><div class="type-item" :class="{active: type == 0}" @click="type = 0">微信登录</div></a> -->
        <a><div class="type-item" :class="{active: type == 1}" @click="type = 1">手机号验证</div></a>
      </div>
      <template v-if="type == 0">
        <img class="wxcode" src="" alt="">
      </template>
      <template v-if="type == 1">
        <a-input 
          class="phone-box" 
          v-model:value="form.phone" 
          placeholder="请输入您的手机号" 
          :maxlength="11"
          @blur="validatePhone"
        />
        <div v-if="errors.phone" class="error-message">{{ errors.phone }}</div>
        
        <div class="password-container">
          <a-input 
            class="phone-box" 
            v-model:value="form.password" 
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入您的密码" 
            @blur="validatePassword"
          />
          <span class="toggle-password" @click="togglePassword">
            {{ showPassword ? '隐藏' : '显示' }}
          </span>
        </div>
        <div v-if="errors.password" class="error-message">{{ errors.password }}</div>
        
        <a @click="handleLogin">
          <div class="login-btn" :class="{disabled: submitting}">
            {{ submitting ? '登录中...' : '登录' }}
          </div>
        </a>
        
        <!-- <div class="login-actions">
          <a-checkbox v-model:checked="rememberMe">记住我</a-checkbox>
          <a href="#" class="forget-password">忘记密码?</a>
        </div> -->
      </template>
      <div class="agreement">登录或完成注册即代表你已同意<a href="">《用户协议》</a> 和<a href="">《隐私政策》</a></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 登录类型
const type = ref(1)

// 登录表单
const form = reactive({
  phone: '13800138000',
  password: '123456'
})

// 表单验证错误
const errors = reactive({
  phone: '',
  password: ''
})

// 登录状态
const submitting = ref(false)

// 密码显示状态
const showPassword = ref(false)

// 记住我
const rememberMe = ref(false)

// 切换密码显示/隐藏
const togglePassword = () => {
  showPassword.value = !showPassword.value
}

// 验证手机号
const validatePhone = () => {
  const phone = form.phone.trim()
  const phoneRegex = /^1[3-9]\d{9}$/
  
  if (!phone) {
    errors.phone = '请输入手机号'
    return false
  } else if (!phoneRegex.test(phone)) {
    errors.phone = '请输入正确的手机号码'
    return false
  } else {
    errors.phone = ''
    return true
  }
}

// 验证密码
const validatePassword = () => {
  const password = form.password
  
  if (!password) {
    errors.password = '请输入密码'
    return false
  } else if (password.length < 6) {
    errors.password = '密码长度不能少于6位'
    return false
  } else {
    errors.password = ''
    return true
  }
}

// 模拟登录API调用
const mockLoginAPI = (phone: string, password: string): Promise<{ success: boolean; token?: string; user?: any }> => {
  return new Promise((resolve) => {
    // 模拟网络延迟
    setTimeout(() => {
      // 模拟登录逻辑：手机号13800138000，密码123456视为登录成功
      if (phone === '13800138000' && password === '123456') {
        resolve({
          success: true,
          token: 'mock-jwt-token-' + Date.now(),
          user: {
            id: '1',
            phone,
            name: '测试用户',
            role: 'student'
          }
        })
      } else {
        resolve({ success: false })
      }
    }, 1000)
  })
}

console.log(userStore);

// 处理登录
const handleLogin = async () => {
  // 表单验证
  const isPhoneValid = validatePhone()
  const isPasswordValid = validatePassword()
  
  if (!isPhoneValid || !isPasswordValid) {
    message.warning('请检查表单填写是否正确')
    return
  }
  
  try {
    submitting.value = true
    
    // 调用模拟登录API
    const result = await mockLoginAPI(form.phone, form.password)
    
    if (result.success && result.token && result.user) {
      // 保存登录状态 - 直接修改state属性
      userStore.token = result.token
      userStore.user = result.user
      userStore.isLoggedIn = true

      // userStore.login(result.user, result.token)
      
      // 记住我功能
      if (rememberMe.value) {
        localStorage.setItem('rememberedPhone', form.phone)
        localStorage.setItem('token', result.token)
      } else {
        sessionStorage.setItem('token', result.token)
      }
      

      message.success('登录成功')
      
      // 跳转到首页
      router.push('/loginRole')
    } else {
      message.error('手机号或密码错误')
    }
  } catch (error) {
    console.error('登录失败:', error)
    message.error('登录失败，请稍后重试')
  } finally {
    submitting.value = false
  }
}

// 页面加载时，检查是否有记住的手机号
const rememberedPhone = localStorage.getItem('rememberedPhone')
if (rememberedPhone) {
  form.phone = rememberedPhone
  rememberMe.value = true
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 20px;
  background-color: #fff;
  
  // 桌面端布局
  @media (min-width: 1200px) {
    padding: 0;
  }
  
  // 平板端布局
  @media (max-width: 1199px) {
    flex-direction: column;
    padding: 40px 20px;
    gap: 40px;
  }
  
  // 移动端布局
  @media (max-width: 767px) {
    padding: 20px;
    gap: 30px;
  }
  
  .left-bg {
    display: block;
    width: 827px;
    height: 455px;
    flex-shrink: 0;
    
    // 平板端调整
    @media (max-width: 1199px) {
      width: 600px;
      height: auto;
      max-height: 350px;
      object-fit: contain;
    }
    
    // 小平板调整
    @media (max-width: 767px) {
      width: 100%;
      max-width: 400px;
      height: auto;
      max-height: 200px;
    }
    
    // 移动端隐藏左侧背景图
    @media (max-width: 480px) {
      display: none;
    }
  }
  
  .login-box {
    width: 725px;
    min-height: 600px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #FFF;
    box-shadow: -2px -2px 3px 0 rgba(209, 209, 209, 0.25), 2px 2px 3px 0 rgba(209, 209, 209, 0.25);
    padding: 86px 58px 40px;
    
    // 平板端调整
    @media (max-width: 1199px) {
      width: 100%;
      max-width: 600px;
      min-height: 550px;
      padding: 60px 40px 30px;
    }
    
    // 移动端调整
    @media (max-width: 767px) {
      max-width: 400px;
      min-height: 500px;
      padding: 40px 24px 24px;
      border-radius: 8px;
    }
    
    // 小屏幕调整
    @media (max-width: 480px) {
      padding: 30px 20px 20px;
    }
    
    .title {
      display: inline-block;
      font-size: 36px;
      position: relative;
      margin-bottom: 44px;
      
      // 平板端调整
      @media (max-width: 767px) {
        font-size: 28px;
        margin-bottom: 36px;
      }
      
      // 移动端调整
      @media (max-width: 480px) {
        font-size: 24px;
        margin-bottom: 30px;
      }
    }
    
    .title::before {
      content: '';
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background: rgba(111, 85, 255, 0.60);
      position: absolute;
      top: -22px;
      right: -33px;
      
      // 平板端调整
      @media (max-width: 767px) {
        width: 45px;
        height: 45px;
        top: -18px;
        right: -28px;
      }
      
      // 移动端调整
      @media (max-width: 480px) {
        width: 35px;
        height: 35px;
        top: -14px;
        right: -22px;
      }
    }
    
    .title::after {
      content: '';
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background: rgba(255, 100, 0, 0.70);
      position: absolute;
      top: -30px;
      right: -40px;
      
      // 平板端调整
      @media (max-width: 767px) {
        width: 28px;
        height: 28px;
        top: -24px;
        right: -32px;
      }
      
      // 移动端调整
      @media (max-width: 480px) {
        width: 22px;
        height: 22px;
        top: -18px;
        right: -26px;
      }
    }
    
    .type-list {
      display: flex;
      align-items: flex-start;
      gap: 36px;
      margin-bottom: 58px;
      
      // 移动端调整
      @media (max-width: 767px) {
        gap: 24px;
        margin-bottom: 40px;
      }
      
      .type-item {
        color: #818181;
        font-size: 20px;
        line-height: 28px;
        
        // 移动端调整
        @media (max-width: 767px) {
          font-size: 18px;
          line-height: 24px;
        }
      }
      
      .active {
        position: relative;
        color: #6F55FF;
        font-weight: 600;
      }
      
      .active::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -5px;
        width: 40px;
        height: 3px;
        flex-shrink: 0;
        border-radius: 100px;
        background: #6F55FF;
        
        // 移动端调整
        @media (max-width: 767px) {
          width: 30px;
          height: 2px;
          bottom: -3px;
        }
      }
    }
    
    .wxcode {
      display: block;
      width: 350px;
      height: 350px;
      margin: 0 auto 50px;
      
      // 平板端调整
      @media (max-width: 767px) {
        width: 280px;
        height: 280px;
        margin-bottom: 40px;
      }
      
      // 移动端调整
      @media (max-width: 480px) {
        width: 200px;
        height: 200px;
        margin-bottom: 30px;
      }
    }
    
    .phone-box {
      width: 100%;
      height: 70px;
      margin-bottom: 20px;
      border-radius: 10px;
      border: 0.6px solid #D4D4D4;
      background: #FFF;
      font-size: 18px;
      padding-left: 20px;
      
      // 平板端调整
      @media (max-width: 767px) {
        height: 60px;
        margin-bottom: 8px;
        font-size: 16px;
        padding-left: 16px;
        border-radius: 8px;
      }
      
      // 移动端调整
      @media (max-width: 480px) {
        height: 50px;
        margin-bottom: 6px;
        font-size: 14px;
        padding-left: 12px;
      }
      
      // 错误状态样式
      &.error {
        border-color: #ff4d4f;
      }
    }
    
    // 错误提示信息
    .error-message {
      color: #ff4d4f;
      font-size: 14px;
      margin-bottom: 20px;
      padding-left: 5px;
      
      @media (max-width: 767px) {
        font-size: 12px;
        margin-bottom: 16px;
      }
    }
    
    // 密码容器
    .password-container {
      position: relative;
      margin-bottom: 0px;
      
      @media (max-width: 767px) {
        margin-bottom: 8px;
      }
      
      @media (max-width: 480px) {
        margin-bottom: 6px;
      }
    }
    
    // 密码切换按钮
    .toggle-password {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(calc(-50% - 10px));
      color: #6F55FF;
      cursor: pointer;
      font-size: 14px;
      
      &:hover {
        color: #5a45e6;
      }
      
      @media (max-width: 767px) {
        right: 16px;
        font-size: 12px;
      }
    }
    
    .login-btn {
      width: 100%;
      height: 70px;
      line-height: 70px;
      text-align: center;
      border-radius: 10px;
      background: #6F55FF;
      color: #FFF;
      font-size: 20px;
      margin-bottom: 60px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      
      &:hover:not(.disabled) {
        background-color: #5a45e6;
      }
      
      // 禁用状态
      &.disabled {
        background-color: #ccc;
        cursor: not-allowed;
      }
      
      // 平板端调整
      @media (max-width: 767px) {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        margin-bottom: 20px;
        border-radius: 8px;
      }
      
      // 移动端调整
      @media (max-width: 480px) {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        margin-bottom: 16px;
      }
    }
    
    // 登录操作区域
    .login-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
      
      @media (max-width: 767px) {
        margin-bottom: 30px;
      }
      
      @media (max-width: 480px) {
        margin-bottom: 24px;
      }
      
      .forget-password {
        color: #6F55FF;
        font-size: 14px;
        text-decoration: none;
        
        &:hover {
          color: #5a45e6;
          text-decoration: underline;
        }
        
        @media (max-width: 767px) {
          font-size: 12px;
        }
      }
    }
    
    .agreement {
      font-size: 18px;
      text-align: center;
      
      // 移动端调整
      @media (max-width: 767px) {
        font-size: 14px;
      }
      
      a {
        color: #6F55FF;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>